<!--
 * @description: 
 * @Date: 2022-10-25 22:09:15
 * @LastEditTime: 2022-11-23 20:13:54
-->
<template>
  <div class="hotSearchWindow flex">
    <div class="left">
      <div class="titleTop flex pl-5 items-center">
        <span class="text-2xl">热搜榜</span>
        <div class="flex flex-col -space-y-1 ml-3">
          <div
            id="hotSearch"
            :class="load ? 'xuanzhuan' : ''"
            @click="start"
            class="cursor-pointer"
          >
            <svg
              style="stroke: red"
              width="24"
              height="24"
              viewBox="0 0 48 48"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M42 8V24"
                stroke="#acacac"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M6 24L6 40"
                stroke="#acacac"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M42 24C42 14.0589 33.9411 6 24 6C18.9145 6 14.3216 8.10896 11.0481 11.5M6 24C6 33.9411 14.0589 42 24 42C28.8556 42 33.2622 40.0774 36.5 36.9519"
                stroke="#acacac"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
        </div>
      </div>
      <div class="title-hotsearch"></div>
      <div class="titleScroll">
        <transition v-for="item in leftMenu">
          <div
            @click="choose(item)"
            :class="{ 'leftWindow-listSelect': sp.name == item.name }"
            class="hotSearchWindow-list flex items-center cursor-pointer text-black hover:text-red-500 hover:bg-white"
          >
            <div class="hotWindowIco">
              <img :src="item.ico" />
            </div>
            <div class="">
              {{ item.name }}
            </div>
            <div class="ml-auto">
              <el-checkbox v-model="item.checkbox" @click="setSp(item)"></el-checkbox>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <div class="right" v-loading="load">
      <transition v-for="(item, index) in list">
        <div
          @click="redirectUrl(item.url)"
          class="hotSearch-text cursor-pointer flex hover:bg-white"
        >
          <div class="hotSearchIndex bg-gray-100">{{ index + 1 }}</div>
          <div class="left-hot hover:text-red-500 text-ellipsis">
            {{ item.title }}
          </div>
          <div class="right-hot flex-shrink-0 text-gray-400 text-xs">
            {{ numFormat(item.hot) }}
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>
<script setup>
import { onUnmounted, ref } from "vue";
import ajax from "../../../util/ajax";
import { numFormat } from "@/util/tools.js";
import redirectUrl from "../../../util/href";
import cache from "../../../util/cache";
import emitter from "../../../util/emitter";
import baiduico from "@/assets/img/baiduico.png";
import bilibiliico from "@/assets/img/bilibiliico.png";
import weiboico from "@/assets/img/weiboico.png";
const load = ref(false);
const list = ref([]);
const leftMenu = ref([
  {
    name: "百度热搜",
    type: "baidu",
    ico: baiduico,
  },
  {
    name: "BiliBli排行",
    type: "bilibili",
    ico: bilibiliico,
  },
  {
    name: "微博热搜",
    type: "weibo",
    ico: weiboico,
  },
]);
let defsp = cache.get("hotSearchType", leftMenu.value[0]);
leftMenu.value.filter((ee) => (ee.name == defsp?.name ? (ee.checkbox = true) : ""));
const sp = ref(leftMenu.value[0]);
const choose = (item) => {
  sp.value = item;
  start();
};
const setSp = (item) => {
  leftMenu.value.filter((e) => (e.checkbox = false));
  cache.set("hotSearchType", item);
  emitter.emit("hotSearchreload");
};
const start = () => {
  load.value = true;
  ajax({
    url: "/index/hotSearch",
    params: { type: sp.value.type },
  })
    .then(({ data, code }) => {
      if (code == 1) {
        list.value = data;
      }
    })
    .finally(() => {
      setTimeout(() => {
        load.value = false;
      }, 300);
    });
};
onUnmounted(() => {});
start();
</script>
<style lang="less">
:root {
  --hotSearchLeftWidth: 150px;
}

@color: rgba(255, 0, 0, 0.941);

@keyframes xuanzhuanhot {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

.xuanzhuan {
  animation: xuanzhuanhot 0.6s infinite linear;
}

.hotWindowIco {
  width: 20px;
  height: 20px;
  margin-right: 2px;
}

.title-hotsearch {
  width: 300px;
  position: absolute;
  top: 3px;
  z-index: 10;
  left: calc(var(--hotSearchLeftWidth) + 15px);
}

#hotSearch {
  width: 22px;
  height: 22px;

  > svg {
    width: 100%;
    height: 100%;
  }

  > svg > path {
    transition: all 0.2s;
  }

  > svg:hover {
    > path {
      stroke: @color;
    }
  }
}

.hotSearchWindow {
  height: 100%;
  width: 100%;

  > .left {
    width: var(--hotSearchLeftWidth);
    height: calc(100% + 28px);
    transform: translateY(-28px);
    background-color: #f9fafb;
    border-radius: 10px;
    .titleTop {
      height: 80px;
    }

    .titleScroll {
      height: calc(100% - 80px);
      overflow-y: scroll;

      .hotSearchWindow-list {
        position: relative;
        padding: 10px 10px 10px 15px;
        transition: all 0.3s;

        &:hover {
          .delicon {
            display: block;
          }
        }

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }

  > .right {
    width: calc(100% - var(--hotSearchLeftWidth));
    padding: 0px 15px;
    overflow: scroll;

    > .hotSearch-text {
      height: 30px;
      align-items: center;

      > .hotSearchIndex {
        width: 19px;
        height: 19px;
        text-align: center;
        line-height: 170%;
        font-size: 12px;
        border-radius: 5px;
        margin-right: 10px;
      }

      &:nth-of-type(1) {
        > .hotSearchIndex {
          background: @color;
          color: #fff;
        }
      }

      &:nth-of-type(2) {
        > .hotSearchIndex {
          background: #f61;
          color: #fff;
        }
      }

      &:nth-of-type(3) {
        > .hotSearchIndex {
          background: #faa91e;
          color: #fff;
        }
      }

      > .left-hot {
        font-size: 14px;
        width: calc(100% - 100px);
        height: 100%;
        line-height: 200%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      > .right-hot {
        margin-left: auto;
      }
    }
  }
}

.leftWindow-listSelect {
  background-color: #fff;
  color: @color;

  &::after {
    position: absolute;
    top: 0px;
    left: 0px;
    content: " ";
    width: 5px;
    height: 100%;
    border-radius: 0px 5px 5px 0px;
    background-color: @color;
  }
}
</style>
